<!--
 * @Author       : 郭庆红
 * @Date         : 2025-03-14 15:42:01
 * @LastEditors  : 郭庆红
 * @LastEditTime : 2025-03-18 15:34:10
 * @FilePath     : e:\project\zhlx-autoform-ui\src\components\form-designer\setting-panel\property-editor\seachConfig-editor.vue
 * @Description  : 
 * Copyright 2025 OBKoro1, All Rights Reserved. 
 * 2025-03-14 15:42:01
-->
<template>
  <el-form-item label="搜索配置">
    <!-- {{optionModel}} -->
    <el-button v-if="selectedWidget.type === 'select-process'">
      <span @click="openDialog">搜索配置</span>
    </el-button>
  </el-form-item>
  <el-dialog
    class="zhlx-autoform-dialog"
    v-model="visible"
    title="搜索配置"
    width="50%"
  >
    <!-- 表头 -->
    <el-row class="header">
      <el-col :span="4">配置项</el-col>
      <el-col :span="12">默认值</el-col>
      <el-col :offset="2" :span="6">选项范围</el-col>
    </el-row>
    <el-row
      v-for="(item, index) in selectedWidget.options.seachConfig"
      :key="index"
      class="config-item"
    >
      <!-- 第一列：标签 -->
      <el-col :span="4" class="label-col">
        <div class="label">{{ item.label }}：</div>
      </el-col>
      <!-- 第二列：值输入组件 -->
      <el-col :span="12" class="value-col">
        <!-- 对流程分类 选择树额外处理 -->
        <template v-if="item.type === 'tree-select'">
          <el-tree-select
            ref="treeSelectRef"
            v-model="form[item.key]"
            :data="item.props.options"
            :expand-on-click-node="false"
            style="width: 100%"
            virtual-scroll
            node-key="code"
            check-strictly
            :render-after-expand="false"
            :props="{ value: 'code', label: 'name', children: 'children' }"
            @node-click="(node) => nodeClick(node, item.key, item.next)"
            placeholder="流程分类"
          >
            <template #default="{ node }">
              <span :title="node.label">{{ node.label }}</span>
            </template>
          </el-tree-select>
        </template>
        <template v-else-if="item.type === 'select'">
          <el-select v-model="form[item.key]" v-bind="item.props || {}">
            <el-option
              v-for="option in item.props.options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            ></el-option>
          </el-select>
        </template>
        <template v-else-if="item.type === 'ZHLXCommonSelect'">
          <ZHLXCommonSelect
            v-model="form[item.key]"
            v-bind="item.props || {}"
          ></ZHLXCommonSelect>
        </template>
        <template v-else>
          <component
            :is="getComponentName(item.type)"
            v-model="form[item.key]"
            v-bind="item.props || {}"
            size="small"
          />
        </template>
      </el-col>
      <!-- 第三列：选项配置 -->
      <el-col :offset="2" :span="6" class="options-col">
        <!-- 下拉选项配置 -->
        <template v-if="item.options">
          <template v-if="item.type === 'tree-select'">
            <el-tree-select
              v-model="optionsMap[item.key]"
              :data="item.props.options"
              :expand-on-click-node="false"
              style="width: 100%"
              virtual-scroll
              multiple
              check-strictly
              collapse-tags
              collapse-tags-tooltip
              node-key="code"
              show-checkbox
              check-on-click-node
              :render-after-expand="false"
              :props="{ value: 'code', label: 'name', children: 'children' }"
              placeholder="流程分类"
            >
              <template #default="{ node }">
                <span :title="node.label">{{ node.label }}</span>
              </template>
            </el-tree-select>
          </template>
          <el-select
            v-else
            v-model="optionsMap[item.key]"
            multiple
            collapse-tags
            collapse-tags-tooltip
            v-bind="item.props || {}"
          >
            <el-option
              v-for="option in item.props.options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            ></el-option>
          </el-select>
        </template>
      </el-col>
    </el-row>
    <template #footer>
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script>
import i18n from "@/utils/i18n";
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin";
import ZHLXCommonSelect from "@/components/ZHLX-Components/common/commonSelect/index2.vue"; // 选人组件
import { flowSelectComponent, getTemplateFlowList } from "@/api/workflow/index";
export default {
  name: "seachConfig-editor",
  components: {
    ZHLXCommonSelect,
  },
  mixins: [i18n, propertyMixin],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {
      visible: false,
      form: {},
      optionsMap: {},
      treeSelectRef: null,
      businessTypeCode: "",
    };
  },
  methods: {
    getComponentName(type) {
      return `el-${type}`;
    },
    cancel() {
      this.visible = false;
      this.form = {};
      this.optionsMap = {};
    },
    confirm() {
      const keys = Reflect.ownKeys(this.form);
      const optionsKeys = Reflect.ownKeys(this.optionsMap);
      keys.forEach((key) => {
        const item = this.selectedWidget.options.seachConfig.find(
          (item) => item.key === key
        );
        item.value = this.form[key];
      });
      optionsKeys.forEach((key) => {
        const item = this.selectedWidget.options.seachConfig.find(
          (item) => item.key === key
        );
        item.options = this.optionsMap[key];
      })
      this.visible = false;
    },
    openDialog() {
      this.visible = true;
      this.form = {};
      this.selectedWidget.options.seachConfig.forEach((item) => {
        item.value && (this.form[item.key] = item.value);
        item.options && (this.optionsMap[item.key] = (item.options || []));
      });
    },
    nodeClick(node, key, next) {
      this.businessTypeCode = node.treeDictCode || node.code;
      if (node.code == "document") {
        this.businessTypeCode = "";
      }
      this.form[key] = node.code;
      this.getTemplateList(key, next);
    },
    async getTemplateList(key, next) {
      const params = {
        businessCode: this.form[key],
        isIncludeSub: 1,
        businessTypeCode: this.businessTypeCode,
      };
      const res = await getTemplateFlowList(params).catch(() => {
        console.log("流程数据获取失败~~~~~");
      });
      if (res.code === 0) {
        this.selectedWidget.options.seachConfig.forEach((item) => {
          if (item.key === next) {
            item.props.options = (res.data || []).map((item) => {
              return {
                ...item,
                label: item.templateName,
                value: item.templateId,
              };
            });
          }
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.zhlx-autoform-dialog {
  .header {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  .config-item {
    margin-bottom: 10px;
  }
}
</style>
